<template>
<view class="title-box">
    <view class="title-container">
        <view class="section-title" ref="titleRef">{{ titleName }}</view>
        <view class="title-bg" :style="bgStyle"></view>
    </view>
</view>
</template>

<script>
export default {
    props: {
        titleName: {
            type: String,
            default: ''
        }
    },
    data() {
        return {
            bgStyle: {
                left: '0'
            }
        };
    },
    mounted() {
        this.$nextTick(() => {
            if (this.$refs.titleRef) {
                const query = uni.createSelectorQuery().in(this);
                query.select('.section-title').boundingClientRect(data => {
                    if (data) {
                        const titleWidth = data.width;
                        const bgWidth = 16; 
                        console.log(titleWidth,233);
                        console.log(bgWidth,344);
                        
                        const left = titleWidth - bgWidth;
                        this.bgStyle.left = `${left}rpx`;
                    }
                }).exec();
            }
        });
    }
}
</script>

<style lang="scss" scoped>
.title-container {
    position: relative;
    margin-bottom: 20rpx;
    padding-left: 10rpx;
}
.section-title {
    position: relative;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    z-index: 1;
    display: inline-block;
}
.title-bg {
    position: absolute;
    width: 60rpx;
    height: 15rpx;
    background-color: rgba(65, 207, 230, 0.5);
    bottom: -2rpx;
    z-index: 0;
}
</style>